<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合属性</title>
    <style>
        /*
        ➢ 属性名：background（bg） ➢ 属性值：
  • 单个属性值的合写，取值之间以空格隔开
  ➢ 书写顺序：
  • 推荐：background：color image repeat position
  ➢ 省略问题：
  • 可以按照需求省略
  • 特殊情况：在pc端，如果盒子大小和背景图片大小 一样，此时可以直接写 background：url()
  ➢ 注意点
  • 如果需要设置单独的样式和连写
  • ① 要么把单独的样式写在连写的下面
  • ② 要么把单独的样式写在连写的里面*/
        div {
            width: 400px;
            height: 400px;
            /* 不分先后顺序 背景色  背景图  背景图平铺  背景图位置 */
            /* background: pink url(./images/1.jpg) no-repeat center bottom; */
            /* 背景图位置如果是英文单词可以颠倒顺序 */
            background: pink url(./images/1.jpg) no-repeat bottom center;

            /* 测试背景图位置如果是数值 不要颠倒顺序 */
            /* 水平50px, 垂直100px */
            /* background: pink url(./images/1.jpg) no-repeat 50px 100px; */
            background: pink url(./images/1.jpg) no-repeat 100px 50px;


        }
    </style>
</head>
<body>
<div></div>
</body>
</html>